<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
	<meta charset="UTF-8">
	<title>滚动菜单兼容PC 移动端</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/toast.css">
	<style>
		.test{
			margin: 50px auto;
		}
		.test div{
			width: 300px;
		}
	</style>
</head>
<body style="margin: 0;width: 100%;min-height: 100%">
	<div class="test" style="width: 300px;height: auto;margin-top: 30px">
		<div class="toast_div" style="width:300px;height:300px;border:1px solid #aaa;margin-top: 20px;margin:0 auto"></div>
		<div onclick="showtoastFromDiv()" style="display: inline-block;background: #65D08E;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">在元素垂直显示toast</div>
		<div onclick="showtoastFromDivbottom()" style="display: inline-block;background: #60DDE4;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">在元素底部分显示toast</div>
		<div onclick="showtoastFromDocument()" style="display: inline-block;background: #DC93F4;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">在body底部提示</div>
		<div onclick="showtoastFromDocumentCenter()" style="display: inline-block;background: #F387A1;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">在body中中部提示</div>
		<div onclick="toastbackground()" style="display: inline-block;background: #EFBF66;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">其他背景色toast</div>
		<div onclick="bounceInLeft()" style="display: inline-block;background: #5395D1;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">bounceInLeft-hastrans</div>
		<div onclick="bounceInUp()" style="display: inline-block;background: #CC4532;color:#fff;padding:10px 0;text-align: center;cursor: pointer;margin: 10px 0;border-radius: 4px;line-height: inherit;">bounceInUp-hastrans</div>
	</div>
</body>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/toast.js"></script>
<script>
	function showtoastFromDiv(){
		$('.toast_div').toast({
			content:'这是默认的提示信息',
			duration:1000
		});
	}

	function showtoastFromDivbottom(){
		$('.toast_div').toast({
			content:'这是默认的提示信息',
			duration:3000,
			isCenter:false,
			animateIn:'bounceIn-hastrans',
			animateOut:'bounceOut-hastrans',
		});
	}

	function showtoastFromDocument(){
		showMessage('这是提示消息哈！');
	}

	function showtoastFromDocumentCenter(){
		showMessage('这是提示消息哈！',3000,true,'bounceInUp-hastrans','bounceOutDown-hastrans');
	}

	function toastbackground() {
		$('body').toast({
			position:'fixed',
			content:'这是默认的提示信息',
			duration:3000,
			isCenter:false,
			background:'rgba(230,0,0,0.5)',
			animateIn:'bounceIn-hastrans',
			animateOut:'bounceOut-hastrans',
		});
	}

	function bounceInLeft(){
		$('body').toast({
			position:'fixed',
			content:'这是默认的提示信息',
			duration:3000,
			isCenter:false,
			background:'rgba(230,0,0,0.5)',
			animateIn:'bounceInLeft-hastrans',
			animateOut:'bounceOutRight-hastrans',
		});
	}

	function bounceInUp(){
		$('body').toast({
			position:'fixed',
			content:'这是默认的提示信息',
			duration:3000,
			isCenter:false,
			background:'#4EA44E',
			animateIn:'bounceInUp-hastrans',
			animateOut:'bounceOutDown-hastrans',
		});
	}
</script>
</html>